<div class="info-panels">
  <div class="input-color-group-one">
    <input class="input-color" autocomplete="on" name="text" type="text" required="" placeholder="255, 255, 255, 0.5">
		<label class="color-label">RGBA</label>
		<button class="btn-copy">
	  	<svg class="svgs" id="icon-btn-copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.98,13.96h-4.74c-.13,0-.24-.11-.24-.24V7.07c0-.13,.11-.24,.24-.24h4.74c.13,0,.24,.11,.24,.24v6.64c0,.13-.11,.24-.24,.24Zm-6.77-7.72V14.55c0,.66,.53,1.19,1.19,1.19h6.41c.66,0,1.19-.53,1.19-1.19V6.24c0-.66-.53-1.19-1.19-1.19h-6.41c-.66,0-1.19,.53-1.19,1.19Z"></path><path d="M15.68,18.95H7.19c-.66,0-1.19-.53-1.19-1.19V7.37c0-.49,.4-.89,.89-.89s.89,.4,.89,.89v9.57c0,.13,.1,.23,.23,.23h7.67c.49,0,.89,.4,.89,.89s-.4,.89-.89,.89Z"></path></svg>		
		</button>
  </div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: button, input, copy, color, line, hover effect, input effect , hover button */
.info-panels {
  --color-icon: #fff;
  --color-input: #ccc;
  --color-border: #9e9e9e;
  --color-border-hover: #1a73e8;
  --all-transition: all .2s ease-out;
  --input-focus-opacity: .3;
}

.input-color-group-one {
  position: relative;
}

.input-color {
  max-width: 230px;
  min-width: 150px;
  border: 1.5px solid var(--color-border);
  border-radius: 80px;
  background: none;
  padding: 16px;
  font-size: 16px;
  transition: var(--all-transition);
}

.input-color:focus {
  color: var(--color-input);
  outline: none;
  border: 1.5px solid var(--color-border-hover);
}

.input-color:valid {
  color: var(--color-input);
  outline: none;
}

.input-color::-webkit-input-placeholder {
  color: var(--color-input);
}

.input-color::-moz-input-placeholder {
  color: var(--color-input);
}

.input-color::-ms-input-placeholder {
  color: var(--color-input);
}

.input-color:focus::-webkit-input-placeholder, input-color:valid::-webkit-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.input-color:focus::-moz-input-placeholder, input-color:valid::-moz-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.input-color:focus::-ms-input-placeholder, input-color:valid::-ms-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.color-label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-border);
  font-weight: 600;
  padding: 0 5px;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  top: -11.5px;
  left: 25px;
  background-color: transparent;
  cursor: default;
  backdrop-filter: blur(10px);
  transition: var(--all-transition);
}

.input-color:focus ~ .color-label, input-color:valid ~ .color-label {
  color: var(--color-border-hover);
  border: 1.5px solid var(--color-border-hover);
}

.btn-copy {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  top: -11.5px;
  right: 25px;
  background-color: transparent;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: var(--all-transition);
}

.btn-copy:hover {
  background-color: var(--color-border);
  transform: scale(1.2);
}

.btn-copy:active {
  transform: scale(1.1);
}

.input-color:focus ~ .btn-copy {
  border: 1.5px solid var(--color-border-hover);
}

.input-color:valid .input-color:focus ~ .btn-copy {
  border: 1.5px solid var(--color-border);
}

.input-color:focus ~ .btn-copy:hover {
  background-color: var(--color-border-hover);
}

#icon-btn-copy {
  fill: var(--color-border);
}

.btn-copy:hover #icon-btn-copy {
  fill: var(--color-icon);
}

.input-color:focus ~ .btn-copy #icon-btn-copy {
  fill: var(--color-border-hover);
}

.input-color:focus ~ .btn-copy:hover #icon-btn-copy, .input-color:valid ~ .btn-copy:hover #icon-btn-copy {
  fill: var(--color-icon);
}
</style>
